<template>
  <div class="operationTicket flowCloumn h100">
    <div class="constentmain h100">
      <list-table-new v-bind="tableSetting" ref="klTable"></list-table-new>
    </div>
  </div>
</template>
<script>
import { operationTicketList } from "@/api/twoTicketManagement/operationTicket.js";
export default {
  data() {
    return {
      showDialog: false, // 是否显示弹框
      dialogTitle: "", // 弹框标题
      seleteComponent: "", // 弹框组件
      pageType: "list",
      tableSetting: {
        // selectionShow: true,
        showCustomBtn: true,
        showFilterBtn: true,
        pageConfig: {
          pageCode: "operationTicketCheck", //页面标识，用来存储过滤器以及自定义列的时候用
          userId: this.$store.getters.userInfo.id,
        },
        // 搜索框
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getTableData(params, sortStr);
          },
          queryData: {
            page: 1,
            pageSize: 15,
            queryStatus: ["3"],
          },
          searchArr: [
            {
              type: "select",
              label: "操作票类型",
              model: "group",
              option: this.$store.getters["dirtData"]("ticket_operation_group"),
            },
            {
              type: "select",
              label: "操作票子类",
              model: "type",
              option: this.$store.getters["dirtData"]("ticket_operation_type"),
            },
            {
              type: "organization",
              label: "创建单位",
              model: "deptName",
              idsStr: "deptId",
            },
            {
              type: "select",
              label: "抽查结果",
              model: "checkResults",
              option: this.$store.getters["dirtData"]("spot_check_results"),
            },
            {
              type: "input",
              label: "标题",
              model: "title",
              placeholder: "请输入",
              methods: (val) => {},
            },
            {
              type: "input",
              label: "操作票票号",
              model: "code",
              placeholder: "请输入",
              methods: (val) => {},
            },
            {
              type: "input",
              label: "工作票票号",
              model: "workCode",
              placeholder: "请输入",
              methods: (val) => {},
            },
            {
              type: "userOnly",
              label: "创建人",
              model: "createByName",
              placeholder: "请选择或输入",
            },
            {
              type: "datetimerange",
              label: "创建时间",
              model: "createTime",
            },
            {
              type: "userOnly",
              label: "操作人",
              model: "workerName",
              placeholder: "请输入",
              methods: (val) => {},
            },
            {
              type: "date",
              label: "操作开始时间",
              model: "startTime",
              title: "操作开始时间",
            },
          ],
        },
        // 过滤器的值
        filterFormData: {},
        // 过滤器的默认值
        defaultFilterData: {},
        userCustomData: [],
        // 表头
        column: [
          {
            label: "状态",
            prop: "status",
            sortable: true,
            width: 90,
            formatter: (row) => {
              let types = this.$store.getters["dirtData"](
                "ticket_operation_status"
              );
              let val = row.status;
              let obj = types.find((i) => i.value == val);
              return obj ? obj.label : val;
            },
          },
          {
            label: "操作票票号",
            prop: "code",
            sortable: true,
            width: 130,
          },
          {
            label: "标题",
            prop: "title",
            sortable: true,
            showTooltip:true,
            width: 280,
          },
          {
            label: "操作票类型",
            prop: "group",
            sortable: true,
            minWidth: 140,
            formatter: (row) => {
              let types = this.$store.getters["dirtData"](
                "ticket_operation_group"
              );
              let val = row.group;
              let obj = types.find((i) => i.value == val);
              return obj ? obj.label : val;
            },
          },
          {
            label: "操作票子类",
            prop: "type",
            sortable: true,
            minWidth: 120,
            formatter: (row) => {
              let types = this.$store.getters["dirtData"](
                "ticket_operation_type"
              );
              let val = row.type;
              let obj = types.find((i) => i.value == val);
              return obj ? obj.label : val;
            },
          },
          {
            label: "操作人",
            prop: "workerName",
            sortable: true,
            minWidth: 90,
          },
          {
            label: "监护人",
            prop: "guardianName",
            sortable: true,
            minWidth: 90,
          },
          {
            label: "操作开始时间",
            prop: "startTime",
            sortable: true,
            minWidth: 160,
          },
          {
            label: "操作结束时间",
            prop: "endTime",
            sortable: true,
            minWidth: 160,
          },
          {
            label: "创建单位",
            prop: "deptName",
            sortable: true,
            minWidth: 160,
          },
          {
            label: "创建人",
            prop: "createByName",
            sortable: true,
            minWidth: 90,
          },
          {
            label: "抽查结果",
            prop: "checkResults",
            sortable: true,
            scopeType: "formate",
            minWidth: 120,
            method: (row) => {
              if (row.checkResults) {
                return `<span>合格</span>`;
              } else if (row.checkResults == false) {
                return `<span style="color: #f42c2c">不合格</span>`;
              } else {
                return `<span>未抽查</span>`;
              }
            },
          },
        ],
        // 表格方法
        tableMethods: {
          //点击行的方法
          rowClick: (val) => {
            this.pageType = "check";
            this.gotoDetails(val);
          },
        },
      },
    };
  },
  created() {
    // let query = {
    //   deptId:
    //     this.$store.state.user.userInfo.orgId ||
    //     this.$store.state.user.userInfo.deptId,
    //   deptName:
    //     this.$store.state.user.userInfo.orgName ||
    //     this.$store.state.user.userInfo.deptName,
    // };
    // this.tableSetting.searchObj.queryData = Object.assign(
    //   this.tableSetting.searchObj.queryData,
    //   query
    // );
    /* 添加监听事件 */
    window.addEventListener("storage", this.init);
  },
  mounted() {
    this.$refs.klTable.getTableConfig(); //需要显示过滤器以及自定义列时要提前调用,不需要过滤器时不调用
    this.init();
  },
  beforeDestroy() {
    /* 删除监听事件 */
    window.removeEventListener("storage", this.init);
  },
  methods: {
    init() {
      this.$refs.klTable.searchData();
    },
    //查询表格数据
    getTableData(params, sortStr) {
      let queryData = Object.assign({}, params);
      if (sortStr.length > 0) {
        queryData.orders = sortStr;
      }
      if (queryData.createTime) {
        queryData.startCreateTime = queryData.createTime[0];
        queryData.endCreateTime = queryData.createTime[1];
        delete queryData.createTime;
      }
      operationTicketList(queryData)
        .then((list) => {
          this.$set(this.tableSetting, "tableData", list.data.list);
          this.$set(this.tableSetting, "totalNumber", list.data.total);
        })
        .catch((e) => {
          this.$set(this.tableSetting, "tableData", []);
          this.$set(this.tableSetting, "totalNumber", "");
        });
    },
    // 详情页面
    gotoDetails(data) {
      let href = "";
      if (data.group === "factory") {
        href = this.$router.resolve({
          name: "substationTicketDetails",
          query: { pageType: this.pageType, id: data.id },
        }).href;
      } else {
        href = this.$router.resolve({
          name: "dispatchTicketDetails",
          query: { pageType: this.pageType, id: data.id },
        }).href;
      }
      window.open(href, "_blank");
    },
  },
};
</script>
<style lang="less" scoped>
.operationTicket {
  .constentmain {
    margin: 10px;
  }
}
.flowCloumn {
  display: flex;
  flex-flow: column nowrap;
}
</style>